<template>
	<!-- 我的奖品 -->
	<view class="content page">
		<status-bar title='我的奖品' :goHome='fromShare'></status-bar>
		<view class="contentBox" v-if="pageData && pageData.length > 0">
			<view class="listBox">
				<view class="listItem" v-for="(prize,index) in pageData" :key="index">
					<view class="listImg">
						<image :src="imgUrl+prize.img" mode="aspectFill"></image>
					</view>
					<view class="listtext">
						<view class="textTitle">{{prize.title}}</view>
						<!-- <view class="textMs">2019-9-18过期</view> -->
						<view class="textMs">{{prize.info}}</view>
					</view>
					<view class="listBtn" @click="examine(prize.logId, prize.prizeId, index)">立即查看</view>
				</view>
			</view>
		</view>
		<empty v-else type='1' cat='3' msg='暂时还没有奖品哦~~'></empty>
		<!-- 奖品详情 -->
		<view class="mask flex-box align-center flex-center" v-if="isShow" @click="isShow = false">
			<view class="popupCont" @click.stop>
				<!-- 奖品详情 -->
				<image class="popupTopImg" v-if="popupData.type != 2" :src="staticUrl+'/lottery/tb.png'" mode="scaleToFill"></image>
				<!-- 奖品领取 -->
				<image class="popupTopImg" v-if="popupData.type == 2" :src="staticUrl+'/lottery/sussetb.png'" mode="scaleToFill"></image>
				<view class="conLists">
					<view class="susseP" v-if="popupData.flag == 6">
						<view class="susseImage">
							<image :src="staticUrl+'/images/checked.png'" mode="aspectFill"></image>
						</view>
						<view class="susseTip">奖品已领取成功</view>
					</view>
					
					<view class="listItem">
						<view class="listImg">
							<image :src="imgUrl+popupData.img" mode="aspectFill"></image>
						</view>
						<view class="listtext">
							<view class="textTitle">{{popupData.title}}</view>
							<view class="textMs">{{popupData.info}}</view>
						</view>
					</view>
					<view class="pirz">
						<view class="pirzTitle"><text class="pirz_title">奖品说明：</text></view>
						<view class="pirz_ms">
							<mp-html :content="popupData.details" lazy-load scroll-table selectable use-anchor show-with-animation/>
						</view>
					</view>
					
					
					<view class="pirz_type" v-if="popupData.type == 1 && popupData.flag < 6">
						<!-- <view class="pirz">
							<view class="pirzTitle"><text class="pirz_title">领奖地址：</text><text class="pirz_ms_text">重庆市江北区观音桥洋河新村24-1-2</text></view>
						</view>
						<view class="pirz">
							<view class="pirzTitle"><text class="pirz_title">联系电话：</text><text class="pirz_ms_text" >023-88888888</text></view>
						</view> -->
						<image class="pirzImg" :src="imgUrl+popupData.QRCode" mode="scaleToFill"></image>
					</view>
					
					<view class="pirz_type" v-if="popupData.flag == 3 && popupData.type == 2">
						
						<view class="pirz"><text class="pirz_ms_text">留下您的地址，我们将为您寄送到家。</text></view>
						<view class="selectBox">
							<view class="selectList flex-box align-center">
								<button type="default" style="background: none;" @click="showMulLinkageThreePicker" class='three flex'>{{pickered}}</button>
								<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
								 @onConfirm="onConfirm"></mpvue-city-picker>
								 <text class="icon-xiasanjiaoxing iconfont"></text>
							</view>
						</view>
						<view class="addrInput"><input type="text" v-model="addrdata" placeholder="填写详细地址" /></view>
						<view class="addrInput"><input type="text" v-model="namedata" placeholder="填写收货人" /></view>
						<view class="addrInput"><input type="text" v-model="teldata" placeholder="填写电话" /></view>
						<!-- <view class="addrInput"><input type="text" v-model="markdata" placeholder="备注" /></view> -->
					</view>
					
				</view>
				<view class="submitBtn" v-if="popupData.flag == 3 && popupData.type == 2" :style="{
					'background': 'url('+staticUrl+'/lottery/jx.png) no-repeat',
					'background-size': '100% 100%'
					}" 
					@click="submitaddr(popupData.logId, popupData.prizeId)">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default{
		data(){
			return{
				addrdata:'',
				namedata:'',
				teldata:'',
				isShow:false,
				
				bid: uni.getStorageSync('bid'),
				cid: '',
				
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				vid:'',
				pageData:'',
				popupData:'',
				fromShare:0, // 是否来自分享 1是 显示返回首页
			}
		},
		onShow() {
			// #ifdef H5
			this.H5Share()
			// #endif
		},
		onLoad(e) {
			that = this
			that.cid = e.cid;
			that.vid = uni.getStorageSync("vid")
			that.getPageData()
			if(e.fromShare){that.fromShare = e.fromShare}
		},
		methods:{
			submitaddr(logId, prizeId){
				if(that.namedata && that.teldata && that.addrdata){
					uni.showLoading({
						title:"数据提交中..."
					})
					that.$http.post({
						url: '/SRA_LuckDraw/saveMyInfo',
						data: {
							VeriCode: that.bid,
							cid: that.cid,
							v_id: that.vid,
							logId: logId,
							prizeId: prizeId,
							uName: that.namedata,
							uTel: that.teldata,
							uAddr: that.addrdata,
							remarks: ''
						}
					}).then(res => {
						if(res.code == 100){
							uni.hideLoading()
							if(res.data == 1){
								uni.showModal({
									showCancel:false,
									title:"提交成功",
									content:"我们会尽快将奖品送到您的手中！请您耐心等待哦~~",
									success: (sub) => {
										if(sub.confirm){
											that.isShow = false
											that.namedata = ''
											that.teldata = ''
											that.addrdata = ''
											that.getPageData()
										}
									}
								})
							} else{
								uni.showToast({
									icon:"none",
									title:res.notice,
									duration:2000
								})
							}
						} else{
							uni.showToast({
								icon: "none",
								title: res.notice,
								duration: 2000
							})
						}
					})
				} else{
					uni.showToast({
						icon:"none",
						title:"请正确填写相关信息",
						duration:2000
					})
				}
			},
			// showMulLinkageThreePicker() {
			// 	this.$refs.mpvueCityPicker.show()
			// },
			// onConfirm(e) {
			// 	var add = e.label.replace(/-/g, '');
			// 	this.pickered = add;
			// 	this.address = add;
			// },
			examine(logId, prizeId, i){
				uni.showLoading({
					title:"数据加载中..."
				})
				that.popupData = that.pageData[i]
				that.isShow = true
				uni.hideLoading()
			},
			getPageData(){
				that.$http.post({
					url: '/SRA_LuckDraw/myPrizeList',
					data: {
						VeriCode: that.bid,
						cid: that.cid,
						v_id: that.vid
					}
				}).then(res => {
					if(res.code == 100){
						that.pageData = res.data
					} else {
						uni.showToast({
							icon:"none",
							title: res.notice,
							duration:2000
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{width: 100%;height: 100vh;overflow: hidden;background: white;}
	.contentBox{width: 100%;height: 100%;padding: 24upx;background-color: red;}
	.listBox{width: 100%;height: 100%;overflow-y: auto;background: #C83543;border-radius: 20rpx;padding: 20rpx;}
	.listItem{width: 100%;height: 180upx;background: #FFFFFF;border-radius: 20upx;padding: 20upx;margin-bottom: 20upx;}
	.listItem:last-child{margin-bottom: 0;}
	.listImg{
		width: 140upx;height: 140upx;border: 1px solid #EEEEEE;border-radius: 20upx;float: left;
	}
	.listImg image{width: 100%;height: 100%;}
	.listBtn{width: 140upx;height: 60upx;border-radius: 20upx;text-align: center;line-height: 60upx;color: #FF5B5E;border: 1px solid #FF5B5E;border-radius: 10upx;float: right;margin-top: 40upx;}
	.listtext{float: left;width: 330upx;height: 140upx;padding: 30upx;}
	.textTitle{font-size: 32upx;font-weight: 400;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
	.textMs{width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #888888;font-size: 28upx;margin-top: 10upx;}
	/* 奖品弹窗 */
	.popupCont {
		overflow: auto;
		max-height:80vh;
		border: 10rpx solid #FF4A4C;
		background-color: #FFFFFF;
		border-radius: 20upx;
		.conLists {
			width: 100%;
			height: 100%;
			background: #FFFFFF;
			position: relative;
			padding: 60upx 40upx;
			.listItem {
				border-radius: 0;
				border-bottom: 1px solid #EEEEEE;
				padding: 0;
				height: 160upx;
			}
		}
		.popupTopImg {
			position: absolute;
			z-index: 8;
			width: 450upx;
			height: 160upx;
			left: 50%;
			margin-left: -225upx;
			margin-top: -120upx;
		}
	}
	.pirz,
	.pirzTitle,
	.pirz_ms,
	.pirz_type {
		width: 100%;
	}
	.pirz_ms{max-height: 120upx;overflow-y: auto;}
	.pirzTitle .pirz_title {
		font-size: 28upx;
		font-weight: bold;
		color: #333333;
	}
	
	.pirz_ms_text {
		font-size: 24upx;
		color: #999999;
		line-height: 40upx;
		font-weight: 0;
	}
	
	.pirz_type {
		margin-top: 20upx;
	}
	
	.pirzImg {
		width: 200upx;
		height: 200upx;
		position: relative;
		left: 50%;
		margin-left: -100upx;
		margin-top: 40upx;
	}
	
	/* 选择器 */
	.selectBox {
		width: 100%;
		margin-top: 36upx;
	}
	
	.selectList {
		width: 100%;
		border: 1px solid #EEEEEE;
		border-radius: 10upx;
		padding: 0 $uni-page-space;
		position: relative;
		.iconfont{
			font-size: 30rpx;
			color: #999999;
		}
	}
	
	.three {
		width: 100%;
		color: #333333;
		text-align: left;
		font-size: 32upx;
		line-height: 70upx;
		height: 70upx;
	}
	
	.submitBtn {
		width: 240upx;
		height: 80upx;
		margin-top: 10upx;
		margin-bottom: 30upx;
		position: relative;
		left: 50%;
		text-align: center;
		margin-left: -120upx;
		line-height: 80upx;
		font-size: 32upx;
		color: #ae1f30;
	}
	
	.addrInput {
		padding: 0 $uni-page-space;
		width: 100%;
		height: 70upx;
		margin-top: 20upx;
		border: 1px solid #EEEEEE;
		border-radius: 10upx;
	}
	
	.addrInput input {
		width: 100%;
		height: 100%;
	}
	
	/* 领取成功 */
	.susseP {
		width: 100%;
		padding-bottom: 20upx;
		border-bottom: 1px solid #EEEEEE;
		margin-bottom: 20upx;
	}
	
	.susseImage {
		width: 110upx;
		height: 110upx;
		background: #FF4A4C;
		border-radius: 100%;
		position: relative;
		left: 50%;
		margin-left: -55upx;
	}
	
	.susseImage image {
		width: 50%;
		height: 50%;
		margin: 25%;
	}
	
	.susseTip {
		color: #FF4A4C;
		font-size: 60upx;
		font-weight: 400;
		text-align: center;
		margin-bottom: 40upx;
		margin-top: 20upx;
	}
</style>
